<template>
    <div>
        <h1>优惠券列表</h1>
        <div>
            优惠券标题：<input type="text" v-model="queryinfo.DTitle">
            适用门店：<select v-model="queryinfo.Shop">
                            <option value="">请选择</option>
                            <option value="河北石家庄">河北石家庄</option>
                            <option value="广州白云山">广州白云山</option>
                            <option value="北京昌平区">北京昌平区</option>
                        </select>
                        <input type="button" value="修改" class="btn btn-primary" @click="show"/>        
        </div>
        <table class="table table-bordered">
      <tbody>
        <tr>
          <td>券类型</td>
          <td>优惠券标题</td>
          <td>优惠券图片</td>
          <td>优惠券有效时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td>{{ item.DType }}</td>
          <td>{{ item.DTitle }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td>
            {{ moment(item.BeginTime).format('YYYY-MM-DD') }} ~
            {{ moment(item.EndTime).format('YYYY-MM-DD') }}
          </td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页 -->
    <div>
      <!-- 显示 -->
      <span>共{{ data.totalCount }}条</span>
      <span>共{{ data.totalPage }}页</span>
      <span>{{ queryinfo.pageindex }}/ {{ data.totalPage }}</span>

      <!-- 改的是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input
        type="button"
        value="上一页"
        @click="goPage(queryinfo.pageindex - 1)"
      />
      <span v-for="item in data.totalPage" @click="goPage(item)">
        {{ item }}</span
      >
      <input
        type="button"
        value="下一页"
        @click="goPage(queryinfo.pageindex + 1)"
      />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />

      <input type="number" v-model="queryinfo.pageindex" />
      <input type="button" value="跳转" @click="goPage(queryinfo.pageindex)" />

      <!-- 改的是页容量 -->
      
    </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import moment  from 'moment';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()

let queryinfo:any=reactive({
    pageindex:1,
    pagesize:2,
    DTitle:'',
    Shop:''
})

let data:any=reactive({
    list: [],
    totalCount: 0,
    totalPage: 0,
})

onMounted(()=>{
    getlist()
})


const goPage=(num:any)=>{
    if(num<1){
        queryinfo.pageindex=1
        return
    }
    if(num>data.totalPage){
        queryinfo.pageindex=data.totalPage
        return
    }
    queryinfo.pageindex=num
    getlist()

}

const getlist=()=>{
    axios({
        url:'/api/Discount/GetDiscountModels',
        method:'get',
        params:queryinfo
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
}

const show=()=>{
    queryinfo.pageindex=1;
    getlist()
}


</script>

<style scoped>

</style>